<template>
	<div class="menu-wrapper">
		<template v-for="(item,index) in menu">
			<el-menu-item
				v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
				:index="item[pathKey]"
				@click="open(item)"
				:key="item[labelKey]"
				:class="{ 'is-active': vaildAvtive(item) }"
			>
				<i :class="item[iconKey]"></i>
				<span slot="title" :alt="item[pathKey]">{{ generateTitle(item) }}</span>
			</el-menu-item>
			<el-submenu v-else-if="!validatenull(item[childrenKey]) && vaildRoles(item)" :index="item[pathKey]" :key="item[labelKey]">
				<template slot="title">
					<i :class="item[iconKey]"></i>
					<span slot="title" :class="{ 'el-menu--display': collapse && first }">{{ generateTitle(item) }}</span>
				</template>
				<template v-for="(child, cindex) in item[childrenKey]">
					<el-menu-item
						:index="child[pathKey] + cindex"
						@click="open(child)"
						:class="{ 'is-active': vaildAvtive(child) }"
						v-if="validatenull(child[childrenKey])"
						:key="child[labelKey]"
					>
						<i :class="child[iconKey]"></i>
						<span slot="title" style="position: relative">
							{{ generateTitle(child) }}
							<span v-if="generateTitle(child) == '待审核'&& reviewNum>0" class="range">{{ reviewNum }}</span>
							<span v-if="generateTitle(child) == '广告审核'&& advertNum>0" class="rangeAdvert">{{ advertNum }}</span>
						</span>
					</el-menu-item>
					<sidebar-item v-else :menu="[child]" :key="cindex" :props="props" :screen="screen" :collapse="collapse"></sidebar-item>
				</template>
			</el-submenu>
		</template>
	</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { validatenull } from '@/util/validate';

import config from './config.js';
export default {
	name: 'sidebarItem',
	data() {
		return {
			config: config,
			// reviewNum: 10,
			num: 1
		};
	},
	props: {
		menu: {
			type: Array
		},
		screen: {
			type: Number
		},
		first: {
			type: Boolean,
			default: false
		},
		props: {
			type: Object,
			default: () => {
				return {};
			}
		},
		collapse: {
			type: Boolean
		}
	},
	created() {
		// this.$store.dispatch("GetADVERTNUM");
		console.log('advertNum',this.advertNum)
	},
	mounted() {},
	computed: {
		...mapGetters(['roles','reviewNum','advertNum']),
		labelKey() {
			return this.props.label || this.config.propsDefault.label;
		},
		pathKey() {
			return this.props.path || this.config.propsDefault.path;
		},
		iconKey() {
			return this.props.icon || this.config.propsDefault.icon;
		},
		childrenKey() {
			return this.props.children || this.config.propsDefault.children;
		},
		nowTagValue() {
			return this.$router.$avueRouter.getValue(this.$route);
		}
	},
	methods: {
		generateTitle(item) {
			return this.$router.$avueRouter.generateTitle(item[this.labelKey], (item.meta || {}).i18n);
		},
		vaildAvtive(item) {
			const groupFlag = (item['group'] || []).some(ele => this.$route.path.includes(ele));
			return this.nowTagValue === item[this.pathKey] || groupFlag;
		},
		vaildRoles(item) {
			item.meta = item.meta || {};
			return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
		},
		validatenull(val) {
			return validatenull(val);
		},
		open(item) {
			console.log(
				this.$router.$avueRouter.getPath({
					name: item[this.labelKey],
					src: item[this.pathKey],
					i18n: (item.meta || {}).i18n
				})
			);
			if (this.screen <= 1) this.$store.commit('SET_COLLAPSE');
			this.$router.$avueRouter.group = item.group;
			this.$router.$avueRouter.meta = item.meta;
			this.$router.push({
				path: this.$router.$avueRouter.getPath({
					name: item[this.labelKey],
					src: item[this.pathKey],
					i18n: (item.meta || {}).i18n
				}),
				query: item.query
			});
		}
	}
};
</script>
<style>
.range {
	position: absolute;
	top: -8px;
	left: 44px;
	display: inline-block;
	color: #f00 !important;
	height: 10px;
	line-height: 10px;
	padding: 3px;
	border-radius: 8px;
}
	.rangeAdvert {
		position: absolute;
		top: -8px;
		left: 60px;
		display: inline-block;
		color: #f00 !important;
		height: 10px;
		line-height: 10px;
		padding: 3px;
		border-radius: 8px;
	}
</style>
